<template>
	<view :id="'luBarTabNav' + barId">
		<u-sticky :offset-top="stickyHeight">
			<view style="margin-left:-15rpx;">
				<v-tabs
					activeColor="#1C1C1E"
					bgColor="#fff"
					@change="_scrollToTarget"
					@getTabHeight="getNavheight"
					:bold="false"
					color="#48484A"
					field="title"
					fontSize="32rpx"
					height="90rpx"
					lineBottom="8rpx"
					:lineColor="activeColor"
					lineHeight="8rpx"
					:lineScale="0.2572"
					paddingItem="0 35rpx"
					:tabs="tabList"
					:value="tabIndex"
				></v-tabs>
			</view>
		</u-sticky>
		<view class="lu-tab-content"><slot></slot></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import vTabs from './v-tabs.vue';
export default {
	props: {
		barId: {
			type: [String, Number],
			default: 0
		},
		duration: {
			type: [String, Number],
			default: 200
		},
		type: {
			type: String,
			default: 'details'
		},
		top: {
			type: [String, Number],
			default: 0
		},
		tabList: {
			type: Array,
			default: function() {
				return [];
			}
		},
		activeColor: {
			type: String,
			default: '#2A7E35'
		}
	},
	data: function() {
		return {
			selectedIndex: 0,
			navHeight: 0,
			tabIndex: 0,
			isClick: !1,
			tim: null,
			navTargetTop: [],
			isLoading: false
		};
	},
	components: { vTabs },
	computed: {
		...mapState(['CustomBar']),
		stickyHeight() {
			return this.CustomBar * (750 / uni.getSystemInfoSync().windowWidth) - 5;
		}
	},
	mounted() {
		this._barInit();
	},
	methods: {
		getNavheight: function(t) {
			this.navHeight = t;
		},
		async _barInit() {
			var n,
				o,
				a,
				u = this;
			if (this.isLoading) {
				return;
			}
			this.isLoading = true;
			this.navTargetTop = [];
			for (let i = 0; i < this.tabList.length; i++) {
				let n = await this._queryMultipleNodes(this.tabList[i].navTarget).then(function(t) {
					var e = t[0],
						n = '',
						r = t[1];
					a = r.height;
					o = r.scrollTop;
					null !== e && null !== r && (n = parseInt(e.top) + r.scrollTop - u.navHeight - u.CustomBar - u.top);
					return n;
				});
				console.log('n', n);
				this.navTargetTop.push(n);
				if (i == this.tabList.length - 1) {
					this.isLoading = false;
				}
			}
		},
		async _pageScroll(t) {
			await this._barInit();
			uni.pageScrollTo({
				scrollTop: this.navTargetTop[t],
				duration: this.duration
			});
		},
		_scrollToTarget: function(t) {
			var e = this;
			clearTimeout(e.tim), (this.isClick = !0);
			this.tabIndex = t;
			this.tim = setTimeout(() => {
				this.isClick = !1;
			}, this.duration + 500);
			this._pageScroll(t);
		},
		_queryMultipleNodes: function(e, n) {
			var r = this;
			return new Promise(function(o, a) {
				var i = uni.createSelectorQuery();
				n && i.in(r),
					e && i.select(e).boundingClientRect(),
					i.selectViewport().fields({
						size: !0,
						scrollOffset: !0
					}),
					i.exec(function(t) {
						o(t);
					});
			});
		},
		async _selectedTab(t) {
			var e = this;
			await this._barInit();
			if (!e.isClick) {
				if (t < this.navTargetTop[0]) {
					e.tabIndex = 0;
				} else {
					for (var r = 0, o = this.navTargetTop.length; r < o; r++) {
						t >= this.navTargetTop[r] && (e.tabIndex = r);
					}
				}
			}
		}
	}
};
</script>

<style></style>
